<template>
  <div
    :id="cameraId"
    class="camera"
    @click="cameraClick()"
    v-bind:style="styleObject"
  >
    <div class="camera-img">
      <img src="../assets/img/183.png" style="width:35px;height:35px;" />
    </div>
    <div class="camera-txt">{{ this.cameraTitle }}</div>
  </div>
</template>
<script>
import addWindow from "@/util/CreateCameraDialog";
export default {
  name: "Camera",
  data() {
    return {
      styleObject: {
        top: this.cameraTop,
        left: this.cameraLeft,
      },
    };
  },
  //接收来自父组件的数据
  props: {
    "camera-top": {
      type: String,
      default: "900px",
    },
    "camera-left": {
      type: String,
      default: "900px",
    },
    "camera-title": {
      type: String,
      default: "标题",
    },
    "camera-id": {
      type: Number,
    },
    "camera-url": {
      type: String,
    },
  },

  methods: {
    cameraClick() {
      addWindow(this.cameraUrl);
    },
  },
};
</script>
<style>
.camera {
  cursor: pointer;
  width: 120px;
  height: auto;
  position: fixed;
  float: left;
  padding: 0px;
  z-index: 99;
}
.camera-img {
  vertical-align: middle;
  width: auto;
  float: left;
}
.camera-txt {
  width: auto;
  padding-left: 9px;
  height: 36px;
  line-height: 36px;
  color: white;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
